<template>
  <div class="body">
    <el-table
      :data.sync="order"
      height="100%"
      border
      stripe
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column prop="orderid" sortable label="订单编号" fit>
      </el-table-column>
      <el-table-column prop="name" sortable label="商品" fit> </el-table-column>
      <el-table-column prop="price" sortable label="价格" fit>
      </el-table-column>
      <el-table-column prop="num" sortable label="数量" fit> </el-table-column>
      <el-table-column prop="date" sortable label="交易时间" fit>
      </el-table-column>
      <el-table-column width="210"
        ><template slot-scope="scope">
          <el-button @click="watchInfo(scope.row)" type="text" size="medium"
            >查看详情</el-button
          >

          <div
            v-if="scope.row.isConfirmedBySeller === false"
            style="display: inline-block; margin-left: 10px"
          >
            <el-popconfirm
              title="请您确认您要售卖此物品"
              @confirm="confirm(scope.row)"
            >
              <el-button
                slot="reference"
                type="text"
                size="medium"
                @click="isConfirm = true"
                >待确认</el-button
              >
            </el-popconfirm>
          </div>
          <div
            v-if="
              scope.row.isConfirmedBySeller === true &&
              scope.row.isConfirmedByCustomer === false
            "
            style="user-select: none; display: inline-block; margin-left: 10px"
          >
            买家待签收
          </div>
          <div
            v-if="
              scope.row.isConfirmedBySeller === true &&
              scope.row.isConfirmedByCustomer === true
            "
            style="user-select: none; display: inline-block; margin-left: 10px"
          >
            已确认
          </div>
        </template></el-table-column
      >
    </el-table>
  </div>
</template>

<script>
export default {
  created() {
    this.$http.get("my/sale").then((res) => {
      if (res.data.success === true) {
        var keymap = {
          cost: "price",
          gid: "goodid",
          oid: "orderid",
          orderTime: "date",
          goodsName: "name",
        };
        for (var i = 0; i < res.data.orderList.length; i++) {
          var obj = res.data.orderList[i];
          for (var key in obj) {
            var newkey = keymap[key];
            if (newkey) {
              obj[newkey] = obj[key];
              delete obj[key];
            }
          }
        }
        for (var i = 0; i < res.data.orderList.length; i++) {
          res.data.orderList[i].date = this.convertTime(
            parseInt(res.data.orderList[i].date)
          );
        }
        this.order = res.data.orderList;
      } else {
        this.$message.error("加载失败,请稍后再试!");
      }
    });
  },
  data() {
    return {
      isConfirm: false,
      order: [],
    };
  },
  methods: {
    watchInfo(row) {
      //跳转到详情页
      var good = {};
      this.$http.get("viewGoodDetails?gid=" + row.goodid).then((res) => {
        if (res.data.success === true) {
          good = {
            goodid: res.data.gid,
            userid: res.data.uid,
            username: res.data.username,
            name: res.data.name,
            price: res.data.price,
            num: res.data.inventory,
            catalog: res.data.catalog,
            img: res.data.imgDir,
            introduction: res.data.goodsDesc,
          };
          this.$store.commit("setGood", good);
          this.$router.push("goodinfo");
        } else {
          this.$message.error("加载失败,请稍后再试!");
        }
      });
    },
    confirm(row) {
      //签收
      this.isConfirm = false;
      this.$http.patch("my/sale/confirm", { oid: row.orderid }).then((res) => {
        if (res.data.success === true) {
          this.$message.success("确认成功,请尽快发货!");
        } else {
          this.$message.error("确认失败,请稍后再试!");
          return;
        }
      });
      row.isConfirmedBySeller = true;
      const arr = {
        orderid: "",
        goodid: "",
        name: "",
        price: "",
        num: "",
        date: "",
        isConfirmedByCustomer: "",
        isConfirmedBySeller: "",
      };
      arr.orderid = row.orderid;
      arr.goodid = row.goodid;
      arr.name = row.name;
      arr.price = row.price;
      arr.num = row.num;
      arr.isConfirmedByCustomer = false;
      arr.isConfirmedBySeller = true;
      this.$set(
        this.order,
        this.order.findIndex((item) => item.orderid === row.orderid),
        arr
      );
    },
  },
};
</script>


<style lang="less" scoped>
.body {
  height: 100%;
  width: 100%;
}
/deep/.el-table {
  font-size: 19px;
}
/deep/.el-button {
  font-size: 19px;
}
/deep/.el-popover {
  font-size: 17px;
}
/deep/.el-button--mini,
.el-button--small {
  font-size: 16px;
}
</style>